<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<script src="lib/js/vue.js"></script>
</head>
<body>
	<div id="myapp">
		<h1 v-if="ok">v-if</h1>
		<h1 v-else>v-else</h1>

		<!-- 切换元素模板化 -->
		<template v-if="ok">
		  <h1>Template Title</h1>
		  <p>Paragraph 1</p>
		  <p>Paragraph 2</p>
		</template>
		<!-- v-show的元素会始终渲染并保持在DOM中， v-show是简单的切换元素的CSS属性display -->
		<h1 v-show="ok">V-show</h1>

		<!-- v-show用在组件上时，因为指令的优先级v-else会出现问题;因此使用v-show代替v-else -->
		<!-- 一般来说，v-if有更高的切换消耗而v-show有更高的初始化渲染消耗。因此，如果需要频繁切换
		v-show较好，如果在运行时条件不大可能改变v-if较好 -->
	</div>


	<script>
		var vm = new Vue({
			el: "#myapp",
			data:{
				ok: true	
			}
		});
		console.log(vm.ok);
		// 可通过控制台改变vm.ok = false ，查看 v-else的样式
	</script>
</body>
</html>